<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus dolorem minus facere distinctio. Eveniet debitis animi enim iusto molestias optio aliquam natus, officia sequi tenetur exercitationem cupiditate reiciendis tempore autem!</p>
		
		
		<div style="width: 100px; height: 100px; background: #000;"></div>
		<span>文本</span>
		
		<br >
		<input type="button" value="按钮2" >
		<input type="text" >
		<script>
			/*javaScript:基础语法+DOM(页面)+BOM(浏览器)
			  JQuery操作DOM方式【7方式，36函数】----改变页面效果
			  1.元素内容操作：操作元素和元素内容的方式【3个函数】
			    .html()
				.val()
				.text()
			  2.元素属性操作【4个函数】
			    .attr()
				.removeAttr()
				.prop()
				.removerProp()
			  3.元素类名操作：操作css样式【4个函数】
			    .addClass()
				.removeClass()
				.toggleClass()
				.hasClass()
			  4.元素样式【尺寸操作】：【5个函数】
			    .css()
				.width()和height()
				outerHeight()和outerWidth()
			  5.元素删除和插入操作：【7个函数】
			    .append()和prepend()
				.after()和before() 
				.remove()和empty()
				.replaceWith()
			  6.元素遍历操作：【6个函数】
			    .children()和.parent()
				.siblings()
				.next()和.prev() 
				.each()
			  7.动画操作：【7个函数】
			    .show()和.hide()
			    .slideDown()和.slideUp()
			    .fadeIn(毫秒数)和.fadeOut(毫秒数)
			    .hover()
			*/
			
			/*  BOM浏览器对象模型  学习7个对象方法使用
			*/
			
			
			/* JQuery操作DOM  通过点击一个元素绑定一个事件给另外一个元素改变效果
			.html()函数:增加一个元素，覆盖原来的html
			*/
		    $('button').click(function(){
				// 做DOM操作---改变页面上其他元素
				// DOM操作--改变p元素改成marquee元素
				$('p').html("<marquee>跑马灯...</marquee>");
			});
			
			/* 100*100框  div 鼠标移动上去，改变下面超文本 */
			$('div').mouseenter(function(){
				$('span').html("<a href='#'>超文本</a>");
			});
			
			// 按钮和输入框，点击按钮，输入框输出文字效果
			$("input[type='button']").click(function(){
				$("input[type='text']").val("文本框输出效果");
			});
		</script>
	</body>
</html>